<template>
  <!-- 任务列表 -->
  <div class="jx-content" id='scrollcontent'>
    <!-- 有任务时渲染 -->
    <div v-if="tableData != []">
      <!-- 表格上方-----start 竞赛名称 -->
      <div class="fl courseName">
        {{Titlename}}
      </div>
      <!-- 竞赛分值 -->
      <div class="fl totalScore">总分值：{{score}}分</div>
      <!-- 功能按钮 -->
      <div class="btn-group fr">
        <el-form :inline="true">
          <el-form-item>
            <div class="button-style" @click="add">&emsp;新 增&emsp;</div>
          </el-form-item>
          <el-form-item>
            <div class="button-style" @click="impotInfo">&emsp;导 入&emsp;</div>
          </el-form-item>
          <el-form-item>
            <div class="button-style" @click="deleteFn">批量删除</div>
          </el-form-item>
          <el-form-item>
            <div class="button-style" @click="orderFn">调整顺序</div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格上方-----end -->
      <!-- 任务列表 -->
      <el-table class="chapter-info-table" :data="tableData" style="width: 100%" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="name" label="任务名称" width="280"></el-table-column>
        <el-table-column prop="introduction" label="任务简介" width="300" show-overflow-tooltip></el-table-column>
        <el-table-column prop="score" label="任务分数" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click.native.prevent="repeatRow(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click.native.prevent="detailRow(scope.row,scope.$index)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 没有任务时选择导入或者新增 -->
    <div id="topic-models" v-else>
      <div class="button-center">
        <span class="button-style" @click="add">新增</span>
      </div>
      <div class="button-center">
        <span class="button-style" @click="impotInfo">导入</span>
      </div>
    </div>
    <!-- 调整排序弹窗 -->
    <el-dialog :close-on-click-modal="false" title="调整排序" :visible.sync="dialogableable" width='530px'>
      <div class="block" style="margin:0">
        <span>{{Titlename}}</span>
        <el-tree :data="dataTree" node-key="id" default-expand-all ref="treeSort" draggable :allow-drop="allowDrop" @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="chapterTitle">{{ node.label }}</span>
            <span style="position:absolute; right:60px;">{{ data.number }}</span>
            <span>
              <i class="iconfont icon-tubiaozhizuomoban1 imgPost" v-if="data.type == 4"></i>
            </span>
            <span>
              <i class="iconfont icon-diannao-copy " style=' color: #02aaff;position:absolute; right:20px; margin-top:5px' v-if="data.type == 2 || data.type == 3"></i>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="saveBtn">
        <button class="button-style saveBtn" @click="handleNodeClick">保 存</button>
      </div>
    </el-dialog>
    <!-- 新增/修改弹窗 -->
    <el-dialog :close-on-click-modal="false" :title="titles" :visible.sync="dialog" width='600px' @close="close" ref="ruleForm">
      <el-form ref="form" label-width="100px" :model="form" :rules="rules">
        <el-form-item label="任务名称：" prop="name">
          <el-input v-model="form.name" maxlength="50" placeholder="请输入任务名称" @input="dataInput"></el-input>
          <p style="position:absolute;  left: 215px; top: 10px; font-size:12px; color:#bbbbbb"> {{titnum}}/50</p>
        </el-form-item>
        <el-form-item label="任务分数：" prop="score">
          <el-input v-model.number="form.score" placeholder="请输入任务分数" @input="checkScore"></el-input>
        </el-form-item>
        <el-form-item label="任务简介：" prop="introduction">
          <el-input type="textarea" v-model="form.introduction" maxlength="200" @input="dataInput2" placeholder="请输入任务简介"></el-input>
          <p style="position:absolute;  left: 370px; top: 180px; font-size:12px;color:#bbbbbb"> {{num}}/200</p>
        </el-form-item>
      </el-form>
      <div class="footer" style="text-align:center">
        <button class="button-style saveBtn" @click="onSubmit('form')">确 认</button>
      </div>
    </el-dialog>
    <!-- 导入弹窗 -->
    <el-dialog :close-on-click-modal="false" title="导入" class="filter-wraper" :visible.sync="dialogable" width='600px'>
      <div class="navBox">
        <span class="reportTemplate" @click="toggleTabs(0)" :class="{templateCheck:cur == 0}">预置任务</span>
        <span class="testTemplate" @click="toggleTabs(1)" :class="{templateCheck:cur == 1}">自定义任务</span>
      </div>
      <el-input class="input-wraper" placeholder="输入关键字进行过滤" v-model="filterText" />
      <div v-show="cur==0">
        <div class="block">
          <el-tree :data="precutCourse" show-checkbox node-key="id" accordion :filter-node-method="filterNode" ref="precut">
            <span class="custom-tree-node" slot-scope="{ node, data}">
              <span class="chapterTitle">{{ node.label }}</span>
              <span style="position:absolute; right:60px;">{{data.number}}</span>
              <span>
                <i class="iconfont icon-tubiaozhizuomoban1 imgPost" v-if="data.type == 4"></i>
              </span>
              <span>
                <i class="iconfont icon-diannao-copy" style='color: #02aaff; position:absolute; right:20px; margin-top:5px' v-if="data.type==2 || data.type==3"></i>
              </span>
            </span>
          </el-tree>
        </div>
        <div class="saveBtn" v-if="precutCourse && precutCourse.length>0">
          <button class="button-style saveBtn" @click="precutFn">保 存</button>
        </div>
      </div>
      <div v-show="cur==1">
        <div class="block">
          <el-tree :data="customCourse" show-checkbox node-key="id" :filter-node-method="filterNode" ref="custom">
            <span class="custom-tree-node" slot-scope="{ node, data}">
              <span class="chapterTitle">{{ node.label }}</span>
              <span style="position:absolute; right:60px;">{{data.number}}</span>
              <span>
                <i class="iconfont icon-tubiaozhizuomoban1 imgPost" v-if="data.type == 4"></i>
              </span>
              <span>
                <i class="iconfont icon-diannao-copy" style=' color: #02aaff;position:absolute; right:20px; margin-top:5px' v-if="data.type==2 || data.type==3"></i>
              </span>
            </span>
          </el-tree>
        </div>
        <div class="saveBtn" v-if="customCourse && customCourse.length>0">
          <button class="button-style saveBtn" @click="customFn">保 存</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash')
import {
  batchDeleteTaskCP,
  addTaskCP,
  modifyTaskCP,
} from '@/api/competitionPlatform'

export default {
  name: 'TaskManagement',
  data() {
    return {
      //角色
      roleId: '',
      //任务信息
      chapterInfoData: {},
      //标题
      Titlename: '',
      //弹窗标题动态
      titles: '',
      //修改或新增 标识
      flag: '',
      //自定义任务数组
      customCourse: [],
      //预制课程数组
      precutCourse: [],
      //排序数组
      sortData: [],
      //页面的id
      courseId: '',
      //修改索引
      chapterId: '',
      //弹窗
      dialog: false,
      //导入弹层
      dialogable: false,
      //调整排序
      dialogableable: false,
      multipleSelection: [],
      //任务类表
      tableData: [],
      resultArray: [],
      // 新增/修改提交的表单
      form: {
        introduction: '', //简介
        name: '', //任务名称
        score: 0, //分数
      },
      // 字数限制
      titnum: 0,
      num: 0,
      //自定义任务
      dataTree: [],
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        score: [{ required: true, message: '请输入分数', trigger: 'blur' }],
        introduction: [
          { required: true, message: '请输入任务简介', trigger: 'blur' },
        ],
      },
      //默认选中第一个tab
      cur: 0,
      //专科版本
      scrollTopLocal: '',
      // 二期需求
      arr2: [],
      checkStrictly: true,
      filterText: '',
      //总分
      score: 0,
    }
  },
  created() {
    //好使的
    this.courseId = this.$localstorage.getLocalStorage('setCourseId')
    this.roleId = this.$store.state.user.roles[0]
    this.init()
    this.CourseTitle()
    this.scrollFns()
  },
  //专科版本建设
  destroyed() {
    window.onscroll = null
  },
  watch: {
    filterText: _.debounce(function (val) {
      if (this.cur == 0) {
        this.$refs.precut.filter(val)
      }

      if (this.cur == 1) {
        this.$refs.custom.filter(val)
      }
    }, 1000),
  },
  methods: {
    //分数验证
    checkScore(value) {
      value = ('' + value).replace(/[^\d]/g, '')
      if (value > 999) {
        value = 999
      }
      this.form.score = value
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    //滚动条距离
    scrollFns() {
      let self = this
      window.onscroll = function () {
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop
        self.$localstorage.putLocalStorage('scrollTop', scrollTop)
      }
    },
    //初始化判断,获取任务列表
    init() {
      let self = this
      self.$http
        .get('/tes/course/' + this.courseId + '/chapter/list/owner')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            // 计算总分
            this.score = 0
            res.data.map((item) => {
              this.score += item.score
            })
            self.$nextTick(() => {
              self.tableData = res.data
            })
            //已经有任务,判断导航显示
            self.$parent.mark = false
            self.$parent.chaperFlag = false
          } else if (res.code == '404') {
            self.tableData = []
            //暂无任务,判断导航显隐藏
            this.$parent.mark = true
            this.$parent.chaperFlag = false
          }
        })
        .catch((err) => {
          self.$message.error(res.message)
        })
    },
    //获取课程名称
    CourseTitle() {
      let self = this
      self.$http
        .get('/tes/course/' + self.courseId + '/chapter/0')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.Titlename = res.data.courseName
            this.$localstorage.putLocalStorage('CourseTitle', self.Titlename)
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //修改信息
    repeatRow(row) {
      let self = this
      this.dialog = true
      this.titnum = 50 - row.name.length
      this.num = 200 - row.introduction.length
      this.chapterId = row.id //记录修改的id值
      this.form.name = row.name
      this.form.score = row.score
      this.form.introduction = row.introduction
      this.flag = 2 //修改标识
      this.titles = '修改任务'
    },
    //关闭
    close() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    //详情
    detailRow(row, index) {
      //为了带着索引 专科版本加的需求
      let $index = index + 1
      if (
        this.roleId == 'ADMIN' ||
        this.roleId == 'TEACHER' ||
        this.roleId == 'MARKET_TEACHER' ||
        this.roleId == 'UNIVERSITY_TEACHER'
      ) {
        //是老师
        this.$router.push({
          path: 'TaskDetails',
          query: {
            courseId: this.courseId,
            taskId: row.singleTaskId,
            chapterId: row.id,
          },
        })
        this.chapterInfoData['chapterId'] = row.id
        this.chapterInfoData['chapterType'] = row.typeName
        this.chapterInfoData['singleTaskId'] = row.singleTaskId
        this.chapterInfoData['index'] = $index
        this.$localstorage.putLocalStorage(
          'chapterInfoData',
          this.chapterInfoData
        )
      } else if (
        this.roleId == 'SUPER_ADMIN' ||
        this.roleId == 'INTERNET_ADMIN'
      ) {
        this.$router.push({
          path: '/Admin/experiment/experimentFile',
          query: {
            courseId: this.courseId,
            taskId: row.singleTaskId,
            chapterId: row.id,
          },
        })
        this.chapterInfoData['chapterId'] = row.id
        this.chapterInfoData['chapterType'] = row.typeName
        this.chapterInfoData['chapterName'] = row.name
        //this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
        this.chapterInfoData['singleTaskId'] = row.singleTaskId
        this.chapterInfoData['index'] = $index
        this.$localstorage.putLocalStorage(
          'chapterInfoData',
          this.chapterInfoData
        )
      }
    },
    //切换事件
    toggleTabs(index) {
      this.cur = index
      this.filterText = ''
      if (index == 0) {
        this.$refs.precut.filter('')
      }

      if (index == 1) {
        this.$refs.custom.filter('')
      }
    },
    //新增
    add() {
      this.dialog = true
      this.form.name = ''
      this.form.introduction = ''
      this.form.score = ''
      this.flag = 1 //新增标识
      this.titles = '新增任务'
    },
    //拖拽方法
    allowDrop(draggingNode, dropNode, type2) {
      if (draggingNode.level === dropNode.level) {
        if (draggingNode.parent.id === dropNode.parent.id) {
          return type2 === 'next' || type2 === 'prev'
        }
      }
    },
    //开始排序
    handleDragStart() {
      //排序分两种情况 1 如果用户没排序，点击保存传值，2 如果用户拖拽多次
      this.$set(this.sortData, 'length', 0)
    },
    //调整排序
    orderFn() {
      this.sort()
      this.dialogableable = true
      this.$set(this.sortData, 'length', 0)
    },
    //获取调整排序的数据
    sort() {
      let self = this
      self.$http
        .get('/tes/course/' + self.courseId + '/chapter/ztree')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            //  self.dataTree = res.data
            let result = []
            for (let i = 0; i < res.data[0].children.length; i++) {
              let current = res.data[0].children[i]
              let label = '第' + (i + 1) + '章 ' + res.data[0].children[i].label
              result.push({
                ...current,
                label: label,
              })
            }
            self.dataTree = result
            for (var i = 0; i < self.dataTree.length; i++) {
              self.sortData.push(self.dataTree[i].id)
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //排序
    handleDragEnd(draggingNode, node, location) {
      let result2 = []
      let self = this
      //  for(let i = 0,len = node.parent.data.children.length; i<len;i++){
      //        let idlist= node.parent.data.children[i].id
      //        self.sortData.push(idlist)
      //   }
      for (let i = 0, len = self.dataTree.length; i < len; i++) {
        let current = self.dataTree[i]
        let label = current.label.replace(
          /第(\d{1,})章/g,
          '第' + (i + 1) + '章 '
        )
        result2.push({ ...current, label: label })
      }
      self.dataTree = result2

      for (var i = 0; i < result2.length; i++) {
        //此处是将id值加入到排序的数组
        self.sortData.push(result2[i].id)
      }
    },

    //调整顺序的保存
    handleNodeClick() {
      let self = this
      self.$http
        .post(
          '/tes/course/' + self.courseId + '/chapter/order-adjustments',
          self.sortData
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              type: 'success',
              message: res.message,
            })
            self.dialogableable = false
            self.init()
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //获取导入数据
    importData() {
      let self = this
      //1 预制课程  0 自定义任务
      self.$http
        .get('/tes/course/' + self.courseId + '/ztree?type=1')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.precutCourse = res.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //获取自定义数据
    importCustomData() {
      let self = this
      //1 预制课程  0 自定义任务
      self.$http
        .get('/tes/course/' + self.courseId + '/ztree?type=0')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.customCourse = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //导入
    impotInfo() {
      this.dialogable = true
      this.filterText = ''
      this.importData()
      this.importCustomData()
    },
    //全选
    handleSelectionChange(val) {
      let valArr = []
      for (let i = 0; i < val.length; i++) {
        valArr.push(val[i].id)
      }
      this.multipleSelection = valArr
    },
    //删除任务
    deleteFn() {
      let self = this
      if (self.multipleSelection.length == 0) {
        self.$message({
          message: '请选择要删除的任务',
          type: 'warning',
        })
        return
      }
      self
        .$confirm('是否删除选中?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          batchDeleteTaskCP(self.courseId, self.multipleSelection).then(
            (res) => {
              if (res.code == '200') {
                self.$message({
                  message: '删除成功',
                  type: 'success',
                })
                self.init()
              } else {
                self.$message.error(res.message)
              }
            },
            (err) => {
              console.log('err')
            }
          )
        })
        .catch(() => {})
    },
    //字数限制
    dataInput() {
      var txtVal = this.form.name.length
      this.titnum = 50 - txtVal
    },
    //字数限制
    dataInput2() {
      var txtVal = this.form.introduction.length
      this.num = 200 - txtVal
    },
    //确认
    onSubmit(form) {
      let self = this
      if (self.flag == 1) {
        //添加
        let data = {
          introduction: self.form.introduction,
          name: self.form.name,
          score: self.form.score,
        }
        self.$refs[form].validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '文件保存中...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)',
            })
            addTaskCP(self.courseId, data)
              .then((res) => {
                if (res.code == '200') {
                  this.$message({
                    message: '保存成功',
                    type: 'success',
                  })
                  self.init()
                  self.dialog = false
                  loading.close()
                } else {
                  self.$message.error(res.message)
                  loading.close()
                }
              })
              .catch((err) => {
                loading.close()
                console.log(err)
              })
          }
        })
      } else if (self.flag == 2) {
        //修改
        let data = {
          introduction: self.form.introduction,
          name: self.form.name,
          score: self.form.score,
        }
        self.$refs[form].validate((valid) => {
          if (valid) {
            self
              .$confirm('是否确定修改?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              })
              .then(() => {
                modifyTaskCP(self.courseId, self.chapterId, data).then(
                  (res) => {
                    if (res.code == '200') {
                      this.$message({
                        message: '保存成功',
                        type: 'success',
                      })
                      self.init()
                      self.dialog = false

                      //任务信息不加高亮
                    } else {
                      self.$message.error(res.message)
                    }
                  }
                )
              })
          }
        })
      }
    },
    //预置任务
    precutFn() {
      let self = this
      let union = []
      let arrlists2 = this.$refs.precut.getCheckedKeys()
      if (arrlists2.length == '') {
        self.$message({
          message: '请选择导入的任务',
          type: 'warning',
        })
        return
      }
      if (arrlists2.includes(undefined)) {
        union = arrlists2.filter(function (item) {
          return item != undefined
        })
        if (union == '') {
          self.$message({
            message: '请选择导入的任务',
            type: 'warning',
          })
          return
        }
      } else {
        union = arrlists2
      }
      const loading = this.$loading({
        lock: true,
        text: '正在保存中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      self.$http
        .post(
          '/tes/course/' + self.courseId + '/chapter/import-exist?type=1',
          union
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '保存成功',
              type: 'success',
            })
            self.init()
            self.dialogable = false
            self.$set(self.multipleSelection, 'length', 0)
            loading.close()
          } else {
            loading.close()
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
          loading.close()
        })
    },
    //自定义任务
    customFn() {
      let self = this
      let union = []
      let arrlistscustom = this.$refs.custom.getCheckedKeys()
      if (arrlistscustom.length == '') {
        self.$message({
          message: '请选择导入的任务',
          type: 'warning',
        })
        return
      }

      if (arrlistscustom.includes(undefined)) {
        union = arrlistscustom.filter(function (item) {
          return item != undefined
        })
        if (union == '') {
          self.$message({
            message: '请选择导入的任务',
            type: 'warning',
          })
          return
        }
      } else {
        union = arrlistscustom
      }
      const loading = this.$loading({
        lock: true,
        text: '正在导入中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      self.$http
        .post(
          '/tes/course/' + self.courseId + '/chapter/import-exist?type=1',
          union
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '保存成功',
              type: 'success',
            })
            self.init()
            self.dialogable = false
            self.$set(self.multipleSelection, 'length', 0)
            loading.close()
          } else {
            self.$message.error(res.message)
            loading.close()
          }
        })
        .catch((err) => {
          console.log(err)
          loading.close()
        })
    },
  },
  //专科版本监控路由
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (
        from.name == 'experimentFile' ||
        from.name == 'StudyMaterials' ||
        from.name == 'StudyFile' ||
        from.name == 'StudyMaterials' ||
        from.name == 'StudyResourse' ||
        from.name == 'PracticeItemBankExperimentFile' ||
        from.name == 'PracticeItemBankExperimentFileTheoretical' ||
        from.name == 'PracticeItemBankCreativeCourse'
      ) {
        vm.scrollTopLocal = vm.$localstorage.getLocalStorage('scrollTop')
        $('html,body').animate(
          {
            scrollTop: vm.scrollTopLocal + 'px',
          },
          600
        )
      }
    })
  },
}
</script>
<style lang="scss">
.filter-wraper {
  .input-wraper {
    margin-top: 20px;
    .el-input__inner {
      width: 100%;
    }
  }
}
.el-tooltip__popper {
  max-width: 30%;
  line-height: 22px;
}
.chapter-info-table .el-switch__core {
  width: 28px;
  height: 16px;
}
.chapter-info-table .el-switch {
  margin-left: 15px;
}
.chapter-info-table .el-switch.is-checked .el-switch__core::after {
  margin-left: -13px;
}
.chapter-info-table .el-switch__core:after {
  width: 12px;
  height: 12px;
}
</style>
<style scoped>
/* #tree1>>>.el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{
	        display: inline-block
	    }
	    #tree1>>> .el-tree-node .el-checkbox .el-checkbox__inner{
	        display: none;
	    } */
/* #tree1>>>.el-tree-node__content label.el-checkbox {
	        display: none;
	    }
	    #tree1>>>.el-tree-node__children label.el-checkbox {
	        display: inline-block;
	        margin-left: -17px;
	    } */
.imgPost {
  vertical-align: inherit;
  position: absolute;
  right: 17px;
  color: rgb(2, 170, 255);
  font-size: 18px;
  padding-top: 5px;
}
.el-button--small:hover {
  color: #1277eb;
}
/* 调整拖拽样式 */
/* .el-tree>>>.el-tree__drop-indicator {
	        position: absolute;
	        left: 0;
	        right: 0;
	        top: -30px;
	        background: #fff;
	        opacity: 1;
	        height: 30px;
	    } */
/* .el-tree>>>.el-tree-node__content:hover{
	        background: #1277eb
	    } */
.el-tree >>> .el-tree-node {
  margin: 6px 0;
}
.el-form-item >>> .el-input__inner {
  width: 200px;
  height: 32px;
  border-radius: 4px;
}
.el-form >>> .el-textarea__inner {
  height: 200px;
  width: 350px;
  resize: none;
}
.el-form-item {
  margin-bottom: 22px;
}
.el-form-item >>> .el-form-item__content {
  height: auto;
}
.block::-webkit-scrollbar {
  width: 2px;
}
.block::-webkit-scrollbar-thumb {
  background: #dededd;
  border-radius: 50px;
}

.chapterTitle {
  width: 390px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.custom-tree-node {
  padding-top: 10px;
}
</style>
<style lang="scss" scoped>
@import './../../../styles/ypublic.scss';
.jx-content {
  width: 1200px;
  margin: 20px auto;
  .courseName {
    font-size: 18px;
  }
  .totalScore {
    margin-left: 30px;
    font-size: 15px;
  }
  #topic-models {
    padding: 200px 0;
    .button-center {
      text-align: center;
      .button-style {
        text-align: center;
        height: 48px;
        line-height: 48px;
        border-radius: 48px;
        padding: 0 106px;
        margin: 10px;
      }
    }
  }
  .navBox {
    .reportTemplate {
      padding-bottom: 10px;
      margin-left: 190px;
      cursor: pointer;
    }
    .testTemplate {
      padding-bottom: 10px;
      margin-left: 40px;
      cursor: pointer;
    }
    .templateCheck {
      border-bottom: 2px solid $yBlue;
      color: $yBlue;
      cursor: pointer;
    }
  }
  .block {
    margin: 20px 0;
    overflow-y: scroll;
    height: 483px;
  }
  .saveBtn {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
